---
title: "submit button · RUAL Documentation"
description: "A submit button to handle your form using a POST or PUT API. An error will be shown if the API responds with a non-200 status code and an error message.…"
canonical: https://docs.rual.nl/block-types/state ui/state_submit_button
language: en
---

# submit button

This block is part of the [`state elements`](https://docs.rual.nl/block-types/state%20elements) group and was last modified in core [`v13.0.6`](https://docs.rual.nl/core-versions/130006).

### API Selection Required

This block relies on a API to perform its API releated actions. You must manually select the API you want to use in your flow using the API selector modal. To access the modal, click the white button on the block.

A submit button to handle your form using a POST or PUT API. An error will be shown if the API responds with a non-200 status code and an error message. For this to work a form element needs to be used.

- form id required `value` A unique ID for the form this field is used in.

- text required `value` Text to be shown within the button. Can be updated using `{state}.content`.

- parameters required `v13.0.5` `object`

- query required `v13.0.5` `object`

- state key required `value` The state to bind the button to. Will execute the left click function and update the `{state}.visible` with `1`.

- icon `value` Icon to be shown next to the button, be aware to include the icon font in your HTML/template. Icon can be updated using `{state}.icon`

- icon: style `uistyle` Style inline CSS style for the icon • Hidden when unused

- icon: class `uiclass` Assigns a CSS class to the icon. • Hidden when unused

- class `uiclass` Assigns a CSS class to the element. • Hidden when unused

- style `uistyle` Applies inline CSS style to the element • Hidden when unused

- attributes `uiattributes` Adds custom attributes to the element. • Hidden when unused

- on success `inpinfunction` Will be executed when the API returns code `200`, to modify the state UI accordingly.

- state `state` Returns the element to the frontend state.

A typical wiring for [submit button](https://docs.rual.nl/block-types/state%20elements/state_submit_button): [value](https://docs.rual.nl/block-types/value/value_default) feeds the `form_id` pin; [value](https://docs.rual.nl/block-types/value/value_default) feeds the `value` pin; [new object](https://docs.rual.nl/block-types/object/object_new_fields) feeds the `parameters` pin; [new object](https://docs.rual.nl/block-types/object/object_new_fields) feeds the `query` pin; [value](https://docs.rual.nl/block-types/value/value_default) feeds the `state` pin; the `state` out pin feeds [get component child](https://docs.rual.nl/block-types/state%20actions/state_component_get_child).

![Studio canvas example for the submit button block: typical wiring for submit button.](https://docs.rual.nl/canvas-examples/state_submit_button.png)

### Version history

Introduced in [`v13.0.1`](https://docs.rual.nl/core-versions/130001).

Last modified in [`v13.0.6`](https://docs.rual.nl/core-versions/130006).